<template>
  <div>
    <template v-for="navMenu in navMenus">
      <!--最后一级菜单-->
      <el-menu-item
        v-if="!(JSON.stringify(navMenu.children) != '[]')"
        :key="navMenu.id"
        :data="navMenu"
        :index="navMenu.path">
        <i :class="navMenu.icon"></i>
        <span slot="title">{{navMenu.name}}</span>
      </el-menu-item>
      <!--此菜单下还有子菜单-->
      <el-submenu
        v-if="(JSON.stringify(navMenu.children) != '[]')"
        :key="navMenu.id"
        :data="navMenu"
        :index="navMenu.path">
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span>{{navMenu.name}}</span>
        </template>
        <!---递归-->
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </template>

  </div>
</template>

<script>
    export default {
      name: "navMenu",
      props:[
        'navMenus'
      ],
      data(){
        return{
          navMenu : this.navMenus
        }
      }
    }
</script>

<style scoped>

</style>
